<template>
  <div>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
          <input v-model="formObj.name" type="text" class="form-control" placeholder="姓名">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input v-model="formObj.gender" type="radio" name="gender" id="inlineRadio2" value="1"> 男
          </label>
          <label class="radio-inline">
            <input v-model="formObj.gender" type="radio" name="gender" id="inlineRadio2" value="2"> 女
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">借书日期</label>
        <div class="col-sm-10">
          <input v-model="formObj.startTime" type="text" class="form-control" placeholder="借书日期">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">借书天数</label>
        <div class="col-sm-10">
          <input v-model="formObj.useday" type="text" class="form-control" placeholder="借书天数">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">是否归还</label>
        <div class="col-sm-10">
          <label class="checkbox-inline">
            <input v-model="formObj.isBack" type="checkbox">
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图书类型</label>
        <div class="col-sm-10">
          <select v-model="formObj.bookType" class="form-control">
            <option value="">全部</option>
            <option value="食品">食品</option>
            <option value="运动">运动</option>
            <option value="学习">学习</option>
            <option value="金融">金融</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图书类型</label>
        <div class="col-sm-10">
          <button @click="chooseBookClick" type="button" class="btn btn-primary">选择图书</button>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">已选择图书</label>
        <div class="col-sm-10">
          <button v-for="(item, index) in choBookList" :key="index" type="button" class="btn btn-primary">{{item.bookName}}<span @click="deleteBookClick(item.id)"> x</span></button>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button @click="addUserOk" type="button" class="btn btn-default">确定</button>
        </div>
      </div>
    </form>
  </div>
</template>


<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data(){
    return {
      formObj: {
        name: '',
        gender: '1',
        startTime: '',
        useday: '',
        isBack: '',
        bookType: '',
        booksName: ''
      }
    }
  },
  computed: {
    ...mapState({
      choBookList: state => state.book.choBookList,
      cacheUser: state => state.user.cacheUser
    })
  },
  methods: {
    ...mapActions([
      'addUserData'
    ]),
    ...mapMutations([
      'setChoBook',
      'cacheUserData',
      'deleteBookItem'
    ]),
    chooseBookClick(){
      this.cacheUserData(JSON.parse(JSON.stringify(this.formObj)));
      this.$router.push({name: 'Lib',params: {bookType: this.formObj.bookType}});
    },
    async addUserOk(){
      this.formObj.booksName = JSON.stringify(this.choBookList);
      let status = await this.addUserData(this.formObj);
      if(status){
        this.$router.push('/home/user/list')
      }

    },
    deleteBookClick(id){
      this.deleteBookItem(id);
    }
  },
  mounted () {
    
    if(!this.$route.params.item){
        alert('请选择用户 ')
        this.$router.push('/home/user/list')
    }

  },
  beforeRouteEnter(to, from, next){
    next(vm => {
      if(from.path != '/home/user/lib'){
        if(vm.$route.params.item){
            vm.formObj = vm.$route.params.item;
            vm.setChoBook(JSON.parse(vm.$route.params.item.booksName));
        }else{
            vm.setChoBook([]);
        }
      }else{
        vm.formObj = vm.cacheUser
      }
    })
  }

}
</script>
